<template>
	<div id="login">
		<div style="text-align: center;margin-top: 60px">
			<img src="../../assets/images/three.png" class="three">
		</div>
		<img src="../../assets/images/IphoneXs.png" class="iphone">
		<div class="box">
			<div class="loginText"> 登录</div>
			<div class="login_input">
				<el-form autoComplete="on" :model="loginForm" ref="loginForm" label-position="left" :rules='rules'>
					<el-form-item prop="username" >
						<el-input name="username" type="text" v-model="loginForm.username" autoComplete="on" placeholder="请输入用户名" class="login-form-input">
							<i slot="prefix" class="el-icon-my-export"></i>
						</el-input>
					</el-form-item>
					<el-form-item prop="password">
						<el-input name="password" :type="pwdType" @keyup.enter.native="handleLogin" v-model="loginForm.password" autoComplete="on" placeholder="请输入密码" class="login-form-Pwdinput">
							<i slot="prefix" class="el-icon-my-Pwdexport"></i>
						</el-input>
					</el-form-item>
					<el-form-item style="margin-bottom:10px">
						<el-button style="width: 100%" type="primary" @click.native.prevent="handleLogin" class="login_button">
							登录
						</el-button>
					</el-form-item>
					<el-checkbox v-model="checked"  style="float: left">记住我</el-checkbox>
<!--					<el-button style="width: 100%" type="primary" @click="toRegistration" class="login_button">-->
<!--						注册-->
<!--					</el-button>-->
				</el-form>
			</div>
		</div>

	</div>
</template>
<script>
	import { mapState,mapGetters,mapActions  } from 'vuex'
    import getData from '../../getData/api'
	export default {
		name: 'login',
        token:localStorage.getItem('token'),
		data() {
			return {
				checked: true,
                RegistrationVisible:false,
                roleArr1:[],
                loginForm: {
					username: '',
					password: ''
				},
                form:{
                    username: '',
                    password: '',
                    repassword:'',
                    sex:'',
                    role:'',
                    email:'',
                },
                sexArr:[
                    {
                        value: '0',
                        label: '女'
                    },  {
                        value: '1',
                        label: '男'
                    },
                ],
                // roleArr1:[
                //     {
                //         value: '0',
                //         label: '女'
                //     },  {
                //         value: '1',
                //         label: '男'
                //     },
                // ],
				pwdType: 'password',
                rules1:{},
                rules: {
                    username: [{
                        required: true,
                        message: '用户名不能为空',
                        trigger: 'blur'
                    }],
                    password:[{
                        required: true,
                        message: '密码不能为空',
                        trigger: 'blur'
                    }],
					email:[{
						pattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
						message: '邮箱格式错误',
						trigger: 'blur'
					}],
                   },

			}
		},
        computed: {
            ...mapState(
                'user',['roleArr']
            ),
            ...mapGetters(
                'user',['testGetter']
            )
		},
		methods: {
		    //调用的方法
			...mapActions(
		      	'user',['generateRoutes','getRoutes','getRoleList','joinAction']
		   ),
            onSubmit() {
                this.$refs['form'].validate((valid) => {
                    if(valid) {
                        let params = {
                            userName: this.form.userName,//用户名
                            repassword:this.form.repassword,
							// roleCode:this.form.role,
                            password: this.form.password,//密码
                            sex: this.form.sex,//性别
                            email:this.form.email,
                            region:this.form.region,
                        }
                        this.joinAction(params)
                        this.RegistrationVisible = false;

                    } else {
                        return false;
                    }
                });
            },
			showPwd() {
				if(this.pwdType === 'password') {
					this.pwdType = ''
				} else {
					this.pwdType = 'password'
				}
			},

			handleLogin() {
			    //表单校验
                this.$refs['loginForm'].validate((valid) => {
                    if(valid) {
                        let params1 = {
                            username: this.loginForm.username,
                            password: this.loginForm.password,
                            rememberMe:this.checked
                        }
                        let params = new FormData();
                        Object.keys(params1).forEach((key) => {
                            params.append(key, params1[key]);
                        });
                        getData.getRoutesData(params)
                            .then((res) => {
                                console.log(res)
                                if (res.status==200){
                                    this.getMenu();
                                }else {
                                    this.$message.error(res.message)
								}
                            })
                            .catch((err)=>{
                            })
                        // this.$router.push({
                        //     path: '/information'
                        // })
                    } else {
                        return false;
                    }
                });
			},
            getMenu(){
                getData.findUserResources()
                    .then((res) => {
                        if (res.status==200){
                            localStorage.setItem('role1',this.loginForm.username)
                            for (let i = 0; i<res.data.length; i++) {
                                if (res.data[i].nodes==null){
                                    res.data[i].nodes=[];
                                }
                            }
                            let btnPermission=[];
                            let menuArr=res.data;
                            Object.keys(menuArr).forEach((key) => {
                                if (menuArr[key].type=="button"){
                                    btnPermission.push(this.menuArr[key].permission)
                                }
                                if (menuArr[key].nodes!=null){
                                    Object.keys(menuArr[key].nodes).forEach((key1) => {
                                        if (menuArr[key].nodes[key1].type=="button"){
                                            btnPermission.push(menuArr[key].nodes[key1].permission)
                                        }
                                        if (menuArr[key].nodes[key1].nodes!=null){
                                            Object.keys(menuArr[key].nodes[key1].nodes).forEach((key2) => {
                                                if (menuArr[key].nodes[key1].nodes[key2].type=="button"){
                                                    btnPermission.push(menuArr[key].nodes[key1].nodes[key2].permission)
                                                }
                                            });
                                        }
                                    });
                                }
                            });
                            localStorage.setItem('btnPermission', JSON.stringify(btnPermission));
                            localStorage.setItem('resourcesrList', JSON.stringify(res.data));//后台返回的权限
                            if (JSON.parse(localStorage.getItem('resourcesrList')) != null){
                                let routers1=JSON.parse(localStorage.getItem('resourcesrList'));
                                this.$router.push({
                                    path:routers1[0].nodes[0].url,
                                });

                            }
                        }

                    })
            },
		},

	}
</script>
<style>
	/*修改Input样式，为了不覆盖其他处的样式*/
	.login-form-input .el-input__inner {
		 height:45px;
		 border-radius: 0px;
		 padding-left: 45px!important;
	 }
	.login-form-input .el-input__inner::-webkit-input-placeholder {
		font-size:14px;
		font-family:MicrosoftYaHei;
		font-weight:400;
		color:#333333;
	}
	.login-form-Pwdinput .el-input__inner {
		height:45px;
		border-radius: 0px;
		background:rgba(255,255,255,1);
		padding-left: 45px!important;
	}
	.login-form-Pwdinput .el-input__inner::-webkit-input-placeholder {
		font-size:14px;
		font-family:MicrosoftYaHei;
		font-weight:400;
		color:#A5A5A5;
	}
	/*使用图片来替换*/
	/*before属性中的content文本是用来占位的,必须有*/
	/*可以设置字体大小来确定大小*/
	/*使用visibility: hidden;来隐藏文字*/
	.el-icon-my-export{
		background: url("../../assets/images/iconfont-entypo-64778.png") center no-repeat;
		background-size: cover;
		display: flex;
		margin-top: 14px;
		margin-left: 9px;
	}
	.el-icon-my-export:before{
		content: "\66ff";
		font-size: 20px;
		visibility: hidden;
	}
	.el-icon-my-Pwdexport{
		background: url("../../assets/images/iconfont-entypo-64804.png") center no-repeat;
		background-size: cover;
		display: flex;
		margin-top: 14px;
		margin-left: 9px;
	}
	.el-icon-my-Pwdexport:before{
		content: "\66ff";
		font-size: 20px;
		visibility: hidden;
	}

</style>
<style lang="less" scoped>
	/* 更改element-UI按钮样式 */
	.el-button--primary{
		width: 269px;
		height: 35px;
		background: #369AFE;
		border-radius: 3px;
		line-height: 11px;
	}
	.el-button--primary:hover{
		width: 269px;
		height: 35px;
		background: #369AFE;
		border-radius: 3px;
		line-height: 11px;
	}
	.el-button--primary:focus{
		width: 269px;
		height: 35px;
		background: #369AFE;
		border-radius: 3px;
		line-height: 11px;
	}

		.login_input{
		width:269px;
		margin:20px 45px 0 45px

	}
	.iphone{
		 margin-top: 100px;
		 margin-left: 98px;
	 }
	.loginText{
		width: 40px;
		height: 28px;
		font-size: 20px;
		font-family: PingFang-SC-Regular, PingFang-SC;
		font-weight: 400;
		color: #000000;
		line-height: 28px;
		-webkit-background-clip: text;
		/*-webkit-text-fill-color: transparent;*/
		margin-top: 59px;
		margin-left: 45px;
	}
	.box{
		float: right;
		margin-right: 8%;
		margin-top: 145px;
		width: 360px;
		height: 380px;
		background: #FFFFFF;
		box-shadow: 0px 2px 6px 6px rgba(0, 0, 0, 0.08);
		border-radius: 8px;
	}
	.login_pic{
		width: 100%;
		height: 94px;
		background: #FFFFFF;
		box-shadow: 0px 1px 3px 0px rgba(0, 21, 41, 0.12);
		.logo{
			margin: 20px 0 20px 65px;
		}

		.text{
			height:18px;
			font-size:23px;
			font-family:PingFangSC-Medium;
			font-weight:500;
			color:#FFFFFF;
			padding: 0;
		}
		.text2{
			height:29px;
			margin-top: 30px;
			font-size:30px;
			font-family:Adobe Heiti Std R;
			font-weight:normal;
			color:#FFFFFF;
		}
		.text3{
			margin-top: 15px;
			height:11px;
			font-size:12px;
			font-family:Adobe Heiti Std R;
			font-weight:normal;
			color:rgba(255,255,255,1);
		}
	}
</style>
